<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无标题文档</title>
  <link href="css/common.css" rel="stylesheet" type="text/css" />
  <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="wrap">
  <div class="zclf login logns">
    <h1  class="blue">用户注册</h1>
    <form action="do/register" method="post">
      <dl>
        <dd>
          <!-- 隐藏字段保存用户类型 -->
          <input type="hidden" name="userIsAdmin" value="${param.userIsAdmin}">
        </dd>
        <dd>
          <label> <small>*</small>用户名</label>
          <input type="text" class="inputh lf" value="" name="username" />
          <div class="lf red laba">用户名要求不低于6个字符</div>
        </dd>
        <dd>
          <label> <small>*</small>密码</label>
          <input type="text" class="inputh lf" value="" name="password" />
          <div class="lf red laba">密码要求不低于6个字符</div>
        </dd>
        <dd>
          <label> <small>*</small>身份证号</label>
          <input type="text" class="inputh lf" value=""  name="idCard"/>
          <div class="lf red laba">身份证号必填</div>
        </dd>
        <dd>
          <label><small>*</small>电话</label>
          <input type="text" name="phone" class="inputh lf" required
                 pattern="1[3-9]\d{9}" placeholder="11位手机号"/>
          <div class="lf red laba">电话号码必填</div>
        </dd>
        <dd>
          <label><small>*</small>住址</label>
          <input type="text" name="address" class="inputh lf" required/>
        </dd>
        <dd>
          <label><small>*</small>邮政编码</label>
          <input type="text" name="postcode" class="inputh lf" required
                 pattern="\d{6}" placeholder="6位邮政编码"/>
        </dd>
        <dd class="hegas">
          <label><small>*</small>验证码</label>
          <input type="text" name="captcha" class="inputh inputs lf" required/>
          <span class="wordp lf"><img src="captcha.jpg" width="96" height="27" alt="验证码"/></span>
          <span class="blues lf"><a href="javascript:refreshCaptcha()" title="">看不清</a></span>
        </dd>
        <dd class="hegas">
          <label>&nbsp;</label>
          <input type="checkbox" id="agreeTerms" name="agreeTerms" required/>
          <label for="agreeTerms" class="labels">我同意<span class="blues">《服务条款》</span></label>
        </dd>
        <dd class="hegas">
          <label>&nbsp;</label>
          <button type="submit" class="spbg buttombg buttombgs f14 lf">立即注册</button>
        </dd>
      </dl>
    </form>
  </div>
</div>

<script>
  function showError(fieldName, message) {
    const field = document.querySelector(`input[name="${fieldName}"]`);
    let errorDiv = field.parentElement.querySelector('.error-message');

    if (!errorDiv) {
      errorDiv = document.createElement('div');
      errorDiv.className = 'red laba error-message';
      field.parentElement.appendChild(errorDiv);
    }

    errorDiv.textContent = message;
  }

  // 表单提交前验证
  document.getElementById('registerForm').onsubmit = function (e) {
    // 1. 检查是否同意条款
    if (!document.getElementById('agreeTerms').checked) {
      showError('agreeTerms', '请同意服务条款');
      e.preventDefault();
      return false;
    }
    // 2. 验证用户名
    const username = document.querySelector('input[name="username"]').value.trim();
    if (username.length &lt; 6) {
      showError('username', '用户名不能少于6个字符');
      e.preventDefault();
      return false;
    }

    // 3. 验证密码
    const password = document.querySelector('input[name="password"]').value;
    if (password.length &lt; 6) {
      showError('password', '密码不能少于6个字符');
      e.preventDefault();
      return false;
    }

    // 4. 验证身份证号
    const idCard = document.querySelector('input[name="idCard"]').value.trim();
    if (!/^\d{17}[\dXx]$/.test(idCard)) {
      showError('idCard', '请输入有效的18位身份证号');
      e.preventDefault();
      return false;
    }

    // 5. 验证手机号
    const phone = document.querySelector('input[name="phone"]').value.trim();
    if (!/^1[3-9]\d{9}$/.test(phone)) {
      showError('phone', '请输入有效的手机号');
      e.preventDefault();
      return false;
    }

    // 6. 验证地址
    const address = document.querySelector('input[name="address"]').value.trim();
    if (address === '') {
      showError('address', '请输入住址');
      e.preventDefault();
      return false;
    }

    // 7. 验证邮政编码
    const postcode = document.querySelector('input[name="postcode"]').value.trim();
    if (!/^\d{6}$/.test(postcode)) {
      showError('postcode', '请输入6位邮政编码');
      e.preventDefault();
      return false;
    }

    // 所有验证通过
    return true;
  };

  function refreshCaptcha() {
    const captchaImg = document.querySelector('.wordp img');
    // 假设后端支持通过时间戳生成新验证码
    const timestamp = new Date().getTime();
    captchaImg.src = `captcha.jpg?timestamp=${timestamp}`;
  }
</script>
</body>
</html>